<template>
  <!-- 菜单管理 -->
  <div class="lshdiv">
    <div class="container-box">
      <!--操作区域-->
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div></div>
        <div>
          <el-button icon="el-icon-plus" type="primary" size="small " plain
            >创建</el-button
          >
        </div>
      </el-row>
      <!--表单区域-->
      <div class="table-box">
        <el-table
          :data="list"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="permission_name" label="菜单名称" />
          <el-table-column prop="route" label="菜单地址" />
          <el-table-column prop="permission_mark" label="权限标识" />
          <el-table-column width="80" label="图标">
            <template slot-scope="{ row }">
              <!-- <i :class="`el-icon-${row.icon}`" /> -->
              <svg-icon
                :icon-class="row.icon"
                :class-name="row.icon"
              ></svg-icon>
            </template>
          </el-table-column>

          <el-table-column prop="component" label="组件路径" />

          <el-table-column label="是否显示">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.hidden"
                :active-value="1"
                :inactive-value="0"
                >1</el-switch
              >
            </template>
          </el-table-column>

          <el-table-column prop="created_at" label="添加时间" />

          <el-table-column width="200" label="操作">
            <template slot-scope="{ row }">
              <template v-if="row.type === 2">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="onEdit(row.id)"
                />
              </template>
              <template v-else>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="onEdit(row.id)"
                />&nbsp;
                <el-button
                  slot="reference"
                  size="small"
                  type="warning"
                  icon="el-icon-plus"
                  circle
                  @click="showPid(row.id)"
                />
                <el-popconfirm
                  title="Darling,确定删除咩？"
                  @onConfirm="onDelete(row.id)"
                >
                  <el-button
                    slot="reference"
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    style="margin-left: 20px"
                  />
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getApprovalAPI } from "@/api/approval";
export default {
  data() {
    return {
      list: [],
      // queryData: {

      // }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      const res = await getApprovalAPI();
      // console.log(res);
      this.list = res;
    },
  },
};

//     // ============================删除
//     async onDelete(id) {
//       // 发送请求
//       await delMenuApi(id);
//       // 信息提示
//       this.$message.success("删除成功");
//       // 边缘问题，如果不是第一页且该页只有一个删除成功，页码减1再拉取列表
//       if (this.formData.page > 1 && this.list.length === 1) {
//         this.formData.page--;
//       }
//       // 重新拉取表格
//       this.initData();
//     },
//     showPid(id) {
//       this.formData.pid = id;
//       this.flag = true;
//     },
//   },
// };
</script>

<style scoped>
.lshdiv {
  padding: 20px;
  background-color: rgba(234, 237, 241);
}
.container-box {
  padding: 20px;

  background-color: #fff;
}
.filter-form,
.tool-bar {
  padding: 15px;
  margin-bottom: 10px;
}
</style>
